<template>
  <div>
    <!-- 搜素框 -->
    <div id="input">
      <el-input v-model="input" placeholder="请输入卡号"></el-input>
      <el-row>
        <el-button type="success" round @click="find">查询</el-button>
        <el-button type="success" round @click="aganstatr">重置</el-button>
        <el-button type="success" round @click="addMedical">增加</el-button>
        <el-button type="success" round @click="qiankuan"
          >欠款人员名单</el-button
        >
      </el-row>
    </div>

    <!-- 欠款名单 -->
    <el-dialog
      style="
        width: 2000px;
        height: 800px;
        margin: 10px -100px;
        text-align: center;
      "
      title="增加医疗卡信息"
      :visible.sync="qiankuanrenyuan"
      :append-to-body="true"
    >
      <el-table :data="dangqianyeqiank" style="width: 100%">
        <el-table-column
          prop="personNo"
          label="医疗卡号"
          width="150"
          class="text"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="chargeNo"
          label="持卡人身份"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.chargeNo == '02'">学生</span>
            <span v-if="scope.row.chargeNo == '01'">教职</span>
            <span v-if="scope.row.chargeNo == '03'">统筹</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="registerDate"
          label="建卡日期"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="personName"
          label="姓名"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="personSex"
          label="性别"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="100" align="center">
        </el-table-column>

        <el-table-column
          prop="telephone"
          label="电话"
          width="130"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="账户余额"
          width="130"
          align="center"
        >
        </el-table-column>
      </el-table>
      <div class="pagination" id="fenye">
        <el-pagination
          @current-change="muDangqianye"
          layout="prev, pager, next"
          :page-size="2"
          :pageCount="maxPgeqiank"
        >
        </el-pagination>
      </div>
      <!-- 页码 -->
    </el-dialog>

    <!-- 增加学生的表单 -->
    <el-dialog
      style="
        width: 1200px;
        height: 850px;
        margin: -80px 300px;
        text-align: center;
      "
      title="增加医疗卡信息"
      :visible.sync="dialogVisible"
      :append-to-body="true"
    >
      <el-form :model="formAdd" ref="formAdd" label-position="right">
        <el-form-item
          label="持卡人身份:"
          style="display: flex; justify-content: center; margin-left: -8px"
          prop="chargeNo"
          :rules="[{ required: true, message: '该栏不能为空' }]"
        >
          <el-select
            v-model="formAdd.chargeNo"
            placeholder="请选择持卡人身份"
            style="width: 250px"
          >
            <el-option
              v-for="item in shenfendata"
              :label="item.clerkName"
              :value="`${0}${item.id}`"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="学号:"
          v-if="formAdd.chargeNo == '02'"
          style="display: flex; justify-content: center; margin-left: 56px"
          prop="personNo"
          :rules="[{ required: true, message: '该栏不能为空' }]"
        >
          <el-input
            v-model.number="formAdd.personNo"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="工号:"
          v-if="formAdd.chargeNo == '01'"
          style="display: flex; justify-content: center; margin-left: 56px"
          prop="personNo"
          :rules="[{ required: true, message: '该栏不能为空' }]"
        >
          <el-input
            v-model.number="formAdd.personNo"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="身份证号:"
          v-if="formAdd.chargeNo == '03'"
          style="display: flex; justify-content: center; margin-left: 25px"
          prop="idCard"
          :rules="[{ required: true, message: '该栏不能为空' }]"
        >
          <el-input
            v-model.number="formAdd.idCard"
            autocomplete="off"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input>
        </el-form-item>

        <template v-if="formAdd.chargeNo == '03'"
          ><el-form-item
            label="姓名:"
            style="display: flex; justify-content: center; margin-left: 50px"
            prop="personName"
            :rules="[{ required: true, message: '该栏不能为空' }]"
          >
            <el-input
              v-model="formAdd.personName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="性别:"
            style="display: flex; justify-content: center; margin-left: 28px"
            prop="personSex"
            :rules="[{ required: true, message: '该栏不能为空' }]"
          >
            <el-select
              v-model="formAdd.personSex"
              placeholder="请选择性别"
              style="width: 250px"
            >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="出生年月:"
            style="display: flex; justify-content: center; margin-left: 25px"
            prop="birthDate"
            :rules="[{ required: true, message: '该栏不能为空' }]"
          >
            <el-input v-model="formAdd.birthDate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="电话:"
            style="display: flex; justify-content: center; margin-left: 50px"
            prop="telephone"
            :rules="[{ required: true, message: '该栏不能为空' }]"
          >
            <el-input
              v-model="formAdd.telephone"
              autocomplete="off"
              oninput="value=value.replace(/^1[3|4|5|7|8][0-9]\d{9}$/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="账户余额:"
            style="display: flex; justify-content: center; margin-left: 25px"
            prop="account"
            :rules="[{ required: true, message: '该栏不能为空' }]"
          >
            <el-input
              v-model="formAdd.account"
              autocomplete="off"
              disabled="disabled"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisible = false;
            quedingAdd();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改学生的表单 -->
    <el-dialog
      style="
        width: 1200px;
        height: 850px;
        margin: -90px 300px;
        text-align: center;
      "
      title="修改医疗卡信息"
      :visible.sync="dialog"
      :append-to-body="true"
    >
      <el-form :model="form" label-position="right">
        <el-form-item
          label="医疗卡号:"
          style="display: flex; justify-content: center; margin-left: 25px"
        >
          <el-input
            v-model="form.personNo"
            autocomplete="off"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="持卡人身份:"
          style="display: flex; justify-content: center; margin-left: 10px"
        >
          <el-input
            v-model="form.chargeNo"
            autocomplete="off"
            disabled="disabled"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="建卡日期:"
          style="display: flex; justify-content: center; margin-left: 25px"
        >
          <el-input
            v-model="form.registerDate"
            autocomplete="off"
            disabled="disabled"
          ></el-input> </el-form-item
        ><el-form-item
          label="姓名:"
          style="display: flex; justify-content: center; margin-left: 50px"
        >
          <el-input v-model="form.personName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="性别:"
          style="display: flex; justify-content: center; margin-left: 35px"
        >
          <el-select
            v-model="form.personSex"
            placeholder="请选择性别"
            style="width: 250px"
          >
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="出生年月:"
          style="display: flex; justify-content: center; margin-left: 30px"
        >
          <el-input v-model="form.birthDate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="电话:"
          style="display: flex; justify-content: center; margin-left: 50px"
        >
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="账户余额:"
          style="display: flex; justify-content: center; margin-left: 25px"
        >
          <el-input
            v-model="form.account"
            autocomplete="off"
            disabled="disabled"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialog = false;
            quedingXiu();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 医疗卡表单 -->
    <el-table :data="dangqianyeMe" style="width: 100%">
      <el-table-column
        prop="personNo"
        label="医疗卡号"
        width="150"
        class="text"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="chargeNo"
        label="持卡人身份"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.chargeNo == '02'">学生</span>
          <span v-if="scope.row.chargeNo == '01'">教职</span>
          <span v-if="scope.row.chargeNo == '03'">统筹</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="registerDate"
        label="建卡日期"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="personName"
        label="姓名"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="personSex" label="性别" width="100" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100" align="center">
      </el-table-column>

      <el-table-column prop="telephone" label="电话" width="130" align="center">
      </el-table-column>
      <el-table-column
        prop="account"
        label="账户余额"
        width="130"
        align="center"
      >
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="rewriter(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteuser(scope.row)"
            >删除</el-button
          >

          <el-button
            size="mini"
            type="danger"
            @click="guashi(scope.row.personNo)"
            >挂失</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <div class="pagination">
      <el-pagination
        @current-change="muDangqianye"
        layout="prev, pager, next"
        :page-size="2"
        :pageCount="maxPgeMe"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapGetters } from "vuex";
import qs from "qs";
// import api from "../../../../utils/apijs";后端分页引入ip
// 后端分页引入ip;
export default {
  data() {
    return {
      dialogVisible: false,
      dialog: false,
      qiankuanrenyuan: false,
      form: {},
      formAdd: {
        account: 0,
      },
      input: "",
      // abc: [], //后端分页当前页内容
      // maxabc: null, //后端分页最大页码
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        //时间选择器
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      // page: 1,
      // limit: 5,
    };
  },
  computed: {
    ...mapGetters([
      "shenfendata",
      "dangqianyeqiank",
      "maxPgeqiank",
      "dangqianyeMe",
      "maxPgeMe",
    ]),
  },
  created() {
    this.getAllme();
    this.getAllShen();
    this.qiankuanall();
    this.getstunum();
    this.getallter();
  },
  methods: {
    ...mapActions([
      "getALL",
      "getShen",
      "queaddme",
      "quedingXiuGia",
      "findMe",
      "getqian",
      "delet",
      "getStu",
      "getter",
      "getguashi",
    ]),
    ...mapMutations(["muDangqianye"]),
    //后端分页，点击页码改变当前页内容
    // dangqianpage(size) {
    //   this.page = size;
    //   console.log(this.page);
    //   this.getAllme();
    // },
    //查询所有医疗卡信息
    getAllme() {
      this.getALL({
        name: "GET_ALLM",
      });
      //后端分页查询当前页
      // api
      //   .GET_ALLM({
      //     page: this.page,
      //     limit: this.limit,
      //   })
      //   .then((data) => {
      //     console.log(data);
      //     this.abc = data.data.data;
      //     this.maxabc = Math.ceil(data.data.count / 5);
      //   });
    },
    //查询所有身份
    getAllShen() {
      this.getShen({
        name: "GET_ALLS",
      });
    },
    //查询
    find() {
      console.log(this.input);
      this.findMe({
        name: "GET_FIND",
        data: { carId: this.input },
      }).then((data) => {
        if (data == 200) {
          this.$message("查询成功");
        } else {
          this.$message("查询失败");
        }
      });
    },
    //重置
    aganstatr() {
      this.getAllme();
      this.input = "";
    },
    //显示增加页面
    addMedical() {
      this.dialogVisible = true;
    },
    //确定增加
    quedingAdd() {
      this.formAdd.account = parseInt(this.formAdd.account);
      this.formAdd.age = parseInt(this.formAdd.age);
      this.queaddme({
        url: "/zsdx-outpatient-service/menzhen/medical-card/page/add",
        method: "post",
        data: this.formAdd,
      }).then((data) => {
        if (data == "200") {
          this.$message("增加成功");
          this.getAllme();
        } else {
          this.$message("增加失败");
        }
      });
    },
    //显示修改
    rewriter(row) {
      this.dialog = true;
      this.form = { ...row };
    },
    //确定修改
    quedingXiu() {
      this.form.age = parseInt(this.form.age);
      this.form.account = parseInt(this.form.account);
      this.quedingXiuGia({
        url: "/zsdx-outpatient-service/menzhen/medical-card/page/modify",
        method: "post",
        data: this.form,
      }).then((data) => {
        if (data == 200) {
          this.$message("修改成功");
          this.getAllme();
        } else {
          this.$message("修改失败");
        }
      });
    },
    //修改时间格式
    getData(value) {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let d = date.getDate();
      return `${year}-${month}-${d}`;
    },
    //欠款人员页面
    qiankuan() {
      this.qiankuanrenyuan = true;
    },
    //欠款人员名单
    qiankuanall() {
      this.getqian({
        url:
          "/zsdx-outpatient-service/menzhen/medical-card/person-negative/select",
        method: "post",
      });
    },
    //删除
    deleteuser(row) {
      console.log(row.personNo);
      this.delet({
        url: "/zsdx-outpatient-service/menzhen/medical-card/page/delete",
        method: "post",
        data: { carId: row.personNo },
      }).then((data) => {
        if (data == 200) {
          this.$message("删除成功");
          this.getAllme();
        } else {
          this.$message("删除失败");
        }
      });
    },
    //挂失
    guashi(id) {
      console.log(id);
      this.getguashi({
        url: "/zsdx-outpatient-service/menzhen/medical-card/loss/update",
        method: "post",
        data: qs.stringify({
          personNo: id,
        }),
      }).then((data) => {
        if (data == 200) {
          this.$message("挂失成功");
          this.getAllme();
        } else {
          this.$message("挂失失败");
        }
      });
    },
    //查询学生学号
    getstunum() {
      this.getStu({
        name: "GET_ALLSTU",
      });
    },
    //查询所有教职工号
    getallter() {
      this.getter({
        name: "GET_TER",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-input {
  width: 250px;
  margin-right: 20px;
}
#input {
  display: flex;
  // justify-content: center;
  margin-bottom: 20px;
}
.el-pagination {
  text-align: center;
}
.pagination {
  margin-top: 10px;
  float: right;
  width: 100%;
  background: white;
  display: flex;
  justify-content: center;
}
.dialog-footer {
  text-align: center;
  padding: 0 20px;
}
.el-dialog__header {
  text-align: center;
}
#fenye {
  width: 1000px;
  margin-right: -20px;
}
</style>
